<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="fragments/easyui_insdep_head :: easyui_insdep_head" th:with="title='主页'">
</head>
<link th:href="@{/easyui/themes/insdep/plugin/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet" type="text/css" />

<style type="text/css">
    #tabs .tabs-panels > .panel > .panel-body {
        overflow: hidden;
    }
</style>

<body>

<div id="master-layout">
    <div data-options="region:'north',border:false,bodyCls:'theme-header-layout'">
        <div class="theme-navigate">
            <div class="left">
                <h2 id="systitle" class="font-grayish"></h2>
                <script type="text/javascript">
                    //<![CDATA[
                    $(function () {
                        $.get("/sys/sysName", function (data) {
                            $("#systitle").text(data);
                        });
                    });
                    //]]>
                </script>
            </div>
            <div class="right">
                <a href="#" class="easyui-menubutton theme-navigate-user-button"
                   data-options="menu:'.theme-navigate-user-panel'">
                    <shiro:principal property="staffName"/>
                </a>

                <div class="theme-navigate-user-panel">
                    <dl>
                        <dd>
                            <img th:src="@{/easyui/themes/insdep/images/portrait86x86.png}" width="86"
                                 height="86"/> <b class="badge-prompt">
                            <font id="staffName"><shiro:principal property="staffName"/></font>
                        </b>
                            <span>id:&nbsp;<font id="staffId"><shiro:principal property="staffId"/></font></span>
                        </dd>
                        <dt>
                            <a class="theme-navigate-user-modify">修改资料</a>
                            <script type="text/javascript">
                                //<![CDATA[
                                $(".theme-navigate-user-modify").on("click", function () {
                                    $('.theme-navigate-user-panel').menu('hide');
                                    windowOpen("修改员工信息", "/staff/pages/staffUpdatePage?staffId=" + $("#staffId").text() + "&staffName=" + $("#staffName").text());
                                });
                                function windowOpen(title, ajax_url) {
                                    $('#ajaxWin').panel({title: title});

                                    $("#frame").attr("src", ajax_url);

                                    $('#ajaxWin').window('open');
                                }
                                //]]>
                            </script>
                            <div id="ajaxWin" class="easyui-window" title=""
                                 data-options="modal:true,collapsible:true,closed:true,maximizable:false,minimizable:false,resizable:false"
                                 style="width:600px;height:500px;overflow: hidden">
                                <iframe id="frame" frameborder="0" style="height:100%;width:100%; "/>
                            </div>

                        <a class="theme-navigate-user-logout" href="/logout">注销</a>
                        </dt>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!--开始左侧菜单-->
    <div data-options="region:'west',border:false,bodyCls:'theme-left-layout'" style="width:200px;">
        <!--正常菜单-->
        <div class="theme-left-normal">
            <!--theme-left-switch 如果不需要缩进按钮，删除该对象即可-->
            <div class="left-control-switch theme-left-switch"><i class="fa fa-chevron-left fa-lg"></i></div>

            <!--start class="easyui-layout"-->
            <div class="easyui-layout" data-options="border:false,fit:true">

                <!--start region:'center'-->
                <div data-options="region:'center',border:false" id="menu">

                    <!--start easyui-accordion-->
                    <div class="easyui-accordion" data-options="border:false,fit:true">
                        <div title="出货">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a id="shipmentPage" href="#" rel="/shipment/pages/shipmentPage">出货</a></li>
                                <li><a id="shipmentRecordPage" href="#"
                                       rel="/shipment/pages/shipmentRecordPage">出货记录</a></li>
                                <li><a id="shipmentTargetPage" href="#"
                                       rel="/shipmentTarget/pages/shipmentTargetManaPage">出货渠道管理</a>
                                </li>
                            </ul>
                        </div>
                        <div title="入货">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a id="purchasePage" href="#" rel="/purchase/pages/purchasePage">入货</a></li>
                                <li><a id="purchaseRecordPage" href="#"
                                       rel="/purchase/pages/purchaseRecordPage">入货记录</a></li>
                                <li><a id="purchaseChannelManaPage" href="#"
                                       rel="/purchaseChannel/pages/purchaseChannelManaPage">入货渠道管理</a></li>
                            </ul>
                        </div>
                        <div title="物资">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a id="repertoryManaPage" href="#" rel="/repertory/pages/repertoryManaPage">仓库</a>
                                </li>
                                <li><a id="stockManaPage" href="#" rel="/stock/pages/stockManaPage">库存</a></li>
                                <li><a id="wareManaPage" href="#" rel="/ware/pages/wareManaPage">商品</a></li>
                                <li><a id="componentManaPage" href="#" rel="/component/pages/componentManaPage">配件标签</a>
                                </li>
                            </ul>
                        </div>
                        <div title="人事">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a id="staffManaPage" href="#" rel="/staff/pages/staffManaPage">职工管理</a></li>
                            </ul>
                        </div>
                        <div title="系统">
                            <ul class="easyui-datalist" data-options="border:false,fit:true">
                                <li><a id="syslogo" onclick="updateLogo()">修改logo</a></li>
                                <li><a id="sysname" onclick="updateSysName()">修改名称</a></li>
                            </ul>
                            <script type="text/javascript">
                                //<![CDATA[
                                function updateLogo() {
                                    $("#logoModifyWindow").window("open");
                                }

                                function updateSysName() {
                                    $.messager.prompt('修改系统名称', '请输入新的系统名称', function (r) {
                                        $.ajax({
                                            url: "/sys/sysName",
                                            type: "PUT",
                                            data: {
                                                sysName: r
                                            },
                                            success: function (data) {
                                                var data = data == "success" ? "修改成功,刷新页面后将显示新名称" : "修改失败";
                                                $.messager.alert('结果', data, 'info');
                                            }
                                        });
                                    });
                                }
                                //]]>
                            </script>

                            <!-- 图片修改窗口开始 -->
                            <div id="logoModifyWindow" class="easyui-window" title="修改Logo"
                                 data-options="modal:true,collapsible:false,closed:true,maximizable:false,minimizable:false,resizable:false"
                                 style="width:550px;height:400px;padding:10px;" align="center">
                                <div style="width: 200px; padding: 30px 60px;" align="center">
                                    <div id="Imgdiv">
                                        <img id="Img" width="200px" height="200px"/>
                                    </div>
                                    <form id="logoModifyForm" enctype="multipart/form-data" action="/sys/logo"
                                          method="post">
                                        <input type="hidden" name="_method" value="PUT"/>
                                        <input class="easyui-filebox" style="width:100%"
                                               data-options="onChange:change_photo, buttonText:'选择Logo'" id="logoUpload"
                                               name="logoUpload"/><br/>
                                        <input class="easyui-linkbutton" type="submit" value="提交"
                                               style="width:100%;height:35px"/> <br/>
                                    </form>
                                </div>
                            </div>
                            <script type="text/javascript" src="/js/previewimage.js"></script>
                            <script type="text/javascript">
                                $('#logoModifyForm').form({
                                    success: function (data) {     // 提交成功后的回调函数。
                                        var data = data == "success" ? "修改成功,刷新页面后将显示新logo" : "修改失败";
                                        $.messager.alert('结果', data, 'info');
                                    }
                                });
                                function change_photo() {
                                    PreviewImage($("input[name='logoUpload']")[0], 'Img', 'Imgdiv');
                                }
                            </script>
                            <!-- 图片修改窗口结束 -->


                        </div>

                    </div>
                    <!--end easyui-accordion-->

                </div>
                <!--end region:'center'-->
            </div>
            <!--end class="easyui-layout"-->

        </div>

        <!--最小化菜单-->
        <div class="theme-left-minimal">
            <ul class="easyui-datalist" data-options="border:false,fit:true">
                <li><a class="left-control-switch"><i class="fa fa-chevron-right fa-2x"></i><p>打开</p></a></li>
            </ul>
        </div>
    </div>
    <!--结束左侧菜单-->



    <div region="center">
        <div id="tabs" class="easyui-tabs" fit="true" style="overflow: hidden" border="false">
        </div>
    </div>

</div>
<script type="text/javascript">
    //<![CDATA[
    $(function () {
        /*布局部分*/
        $('#master-layout').layout({
            fit: true/*布局框架全屏*/
        });

        $("#menu a").click(function () {
            var title = $(this).text();
            var url = $(this).attr("rel");
            var tabId = $(this).attr("id") + "tab";
            var name = $(this).attr("id") + "tab_name";
            f_addTab(name, tabId, title, url);
            return false;    //使超链接的单击事件失效
        });


        /*右侧菜单控制部分*/

        var left_control_status = true;
        var left_control_panel = $("#master-layout").layout("panel", 'west');

        $(".left-control-switch").on("click", function () {
            if (left_control_status) {
                left_control_panel.panel('resize', {width: 70});
                left_control_status = false;
                $(".theme-left-normal").hide();
                $(".theme-left-minimal").show();
            } else {
                left_control_panel.panel('resize', {width: 200});
                left_control_status = true;
                $(".theme-left-normal").show();
                $(".theme-left-minimal").hide();
            }
            $("#master-layout").layout('resize', {width: '100%'})
        });
    });

    //有必要
    $('#tabs').tabs({
        onSelect: function (title) {
            if (title == '时间列表' || title == '课程列表' || title == '当前计划') {
                $.post("../SystemServlet?method=isLoad", function (data) {
                    var data = eval('(' + data + ')');  // change the JSON string to javascript object
                    if (data.success) {
                        if (data.message == false) {
                            alert("当前未挂载选课计划,请前往计划列表中挂载");
                            $('#tabs').tabs('close', title);
                            $("#planList").click();
                        }
                    }
                });
            }

        }
    });

    function tabsClose() {
        var tab = $('#tabs').tabs('getSelected');//获取当前选中tabs
        var index = $('#tabs').tabs('getTabIndex', tab);//获取当前选中tabs的index
        $('#tabs').tabs('close', index);//关闭对应index的tabs
    }

    function f_addTab(name, tabId, title, url) {
        if (url == null) {
            return;
        }
        if ($("#tabs").tabs('exists', title)) {
            $('#tabs').tabs('select', title);
            refreshTab({tabTitle: title, url: url});
        } else {
            $('#tabs').tabs('add', {
                id: tabId,
                title: title,
                content: '<iframe name="' + name + '" src="' + url + '" frameborder="0" style="height:100%;width:100%" />',
                closable: true,//tab显示关闭键
                cache: true //设置缓存，如果为false，在每次选中所选的tab时，都会加载一次页面内容
            });
        }
    }

    /**
     * 刷新tab
     * @cfg
     *example: {tabTitle:'tabTitle',url:'refreshUrl'}
     *如果tabTitle为空，则默认刷新当前选中的tab
     *如果url为空，则默认以原来的url进行reload
     */
    /**
     * 刷新tab
     * @cfg
     *example: {tabTitle:'tabTitle',url:'refreshUrl'}
     *如果tabTitle为空，则默认刷新当前选中的tab
     *如果url为空，则默认以原来的url进行reload
     */
    function refreshTab(cfg) {
        var refresh_tab = cfg.tabTitle ? $('#tabs').tabs('getTab', cfg.tabTitle) : $('#tabs').tabs('getSelected');
        if ((refresh_tab != null) && (refresh_tab.find("iframe").length > 0)) {
            var _refresh_ifram = refresh_tab.find("iframe")[0];
            var refresh_url = cfg.url ? cfg.url : _refresh_ifram.src;
            //_refresh_ifram.src = refresh_url;
            _refresh_ifram.contentWindow.location.href = refresh_url;
        }
    }
    //]]>
</script>
</body>
</html>